import { useState, useEffect } from 'react'
import { useDebounce } from 'use-debounce'
import { doSearch } from './api/request'
// import axios from 'axios'
// debounce 防抖
// import 'antd/dist/antd.css'
// import Cart from './components/cart'

function App() {
  const [userCollection, setUserCollection] = useState([])
  const [filter, setFilter] = useState('');
  const [debounceFilter] = useDebounce(filter, 500)
  // console.log(debounceFilter)
  useEffect(() => {
    if (!filter) {
      return
    };
    // const doSearch = async () => {
    //   // await fetch(`http://swapi.dev/api/people?search=${filter}`)
    //   //   .then(response => response.json())
    //   //   .then((json) => setUserCollection(json.results))
    //   const { data: { results } } = await axios.get(`http://swapi.dev/api/people?search=${filter}`)
    //   // console.log(results)
    // };
    (async () => {
      const { data: { results } } = await doSearch(filter);
      console.log(results)
      setUserCollection(results)
    })()

  }, [debounceFilter])
  return (
    <div className="App">
      {/* <Cart /> */}
      live
      <input value={filter} onChange={(e) => setFilter(e.target.value)} />
      <ul>
        {
          userCollection.map(({ name }, index) => (
            <li key={index}>{name}</li>
          ))
        }
      </ul>
      {userCollection.length == 0 && <div>无记录</div>}
    </div>
  )
}

export default App
